<template>
	<div class="FootMusic">
		<div @click="updateDetailShow" class="footerLeft">
			<img :class="{ img_ar_active: !isbtnShow, img_ar_pauesd: isbtnShow }"
				:src="playList[playListIndex].al.picUrl">
			<div>
				<p>{{playList[playListIndex].name}}</p>
				<span v-for="item in playList[playListIndex].ar" :key="item">
					{{item.name + ' '}}
				</span>
			</div>
		</div>
		<div class="footerRight">
			<svg @click="play" v-if="isbtnShow" class="icon" aria-hidden="true">
				<use xlink:href="#icon-bofanganniu"></use>
			</svg>
			<svg @click="play" v-else class="icon liebiao" aria-hidden="true">
				<use xlink:href="#icon-weibiaoti--"></use>
			</svg>
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-zu"></use>
			</svg>
		</div>

		<audio ref="audio"
			:src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3 `"></audio>
	</div>

	<van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%', width: '100%' }">
		<MusicDetail :addDuration="addDuration" :play="play" :musicList="playList[playListIndex]"></MusicDetail>
	</van-popup>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import MusicDetail from '@/components/item/MusicDetail.vue'

	export default {
		components: {
			MusicDetail
		},

		data() {
			return {
				interval: 0
			}
		},

		computed: {
			...mapState(["playList", "playListIndex", "isbtnShow", "detailShow", "duration"])
		},

		mounted() {
			this.updateTime()
			this.checkError()
			this.$store.dispatch("getLyric", this.playList[this.playListIndex].id)
		},

		updated() {
			this.addDuration()
			this.$store.dispatch("getLyric", this.playList[this.playListIndex].id)
		},

		methods: {
			...mapMutations(['updatePlayListIndex', 'updateDuration', 'updateIsbtnShow', 'updateDetailShow',
				'updateCurrentTime'
			]),

			play() {
				if (this.$refs.audio.paused) {
					this.$refs.audio.play()
					this.updateIsbtnShow(false)
					this.updateTime()
				} else {
					this.$refs.audio.pause()
					this.updateIsbtnShow(true)
					clearInterval(this.interval)
				}
			},

			addDuration() {
				this.updateDuration(this.$refs.audio.duration)
			},

			updateTime() {
				this.interval = setInterval(() => {
					this.updateCurrentTime(this.$refs.audio.currentTime)
				}, 1000)
			},

			checkError() {
				this.$refs.audio.onerror = () => {
					//会员歌曲不能播放自动切下一首
					let index = this.playList.length + 1

					if (index < 0) {
						index = this.playList.length - 1
					} else if (index > (this.playList.length - 1)) {
						index = 0
					}
					this.updatePlayListIndex(index)
				}
			}
		},

		watch: {
			playListIndex() {
				this.checkError()
				this.$refs.audio.autoplay = true
				if (this.$refs.audio.paused) {
					this.updateIsbtnShow(false);
				}
			},

			playList() {
				this.checkError()
				if (this.isbtnShow) {
					this.$refs.audio.autoplay = true;
					this.updateIsbtnShow(false);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.FootMusic {
		width: 100%;
		height: 1.4rem;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #999;
		display: flex;
		padding: 0.2rem;
		justify-content: space-between;

		.footerLeft {
			width: 80%;
			height: 100%;
			display: flex;
			align-items: center;

			div {
				margin-left: 0.4rem;
			}

			span {
				color: #999;
			}

			img {
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
				animation: rotate_ar 10s linear infinite;
			}

			.img_ar_active {
				animation-play-state: running;
			}

			.img_ar_pauesd {
				animation-play-state: paused;
			}

			@keyframes rotate_ar {
				0% {
					transform: rotateZ(0deg);
				}

				100% {
					transform: rotateZ(360deg);
				}
			}
		}

		.footerRight {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon {
				width: 0.6rem;
				height: 0.6rem;
			}
		}
	}
</style>
